<template>
  <div class="header">
    <p>Count的值是{{count}}</p>
    <p>价格是{{price}}</p>
    <button @click="increment">累加</button>
    <button @click="decrement">累减</button>
    <button @click="incrementN({n:5})">累加n</button>
    <button @click="incrementWait">过1.5秒再加</button>
    <button @click="incrementWaitN({n:5})">过1.5秒再加N</button>
    <br>
    <h2>电影的总数是{{movieList.length}}</h2>
<h1>Header</h1>
  </div>
</template>

<script>
import { mapActions, mapMutations, mapState } from 'vuex'
export default {
name:'Header',
computed:{
    ...mapState('count',['count','price','movieList'])
},
methods:{
    ...mapMutations('count',['increment','decrement','incrementN']),
    ...mapActions('count',['incrementWait','incrementWaitN'])
}
}
</script>

<style>
.header{
    margin: 30px;
    background: rgb(142, 99, 142);
    
}
</style>